const themes = [
  ['#1d2d50', '#133b5c', '#1e5f74', '#fcdab7'],
  ['#3a6351', '#f2edd7', '#e48257', '#393232'],
]

export class Theme {
  
  _colors: string[]

  constructor(colors: string[]) {
    this._colors = []
    colors.forEach(item => this._colors.push(item))
  }

  getColor(id: number) {
    return this._colors[id]
  }
}

export class ThemeManager {

  themeId: number

  constructor() {
    this.themeId = 0
  }

  getTheme() {
    return new Theme(themes[this.themeId])
  }

  paneStyle() {
    return {
      background: this.getTheme().getColor(1),
      overflow: "hidden",
      "border-radius": "7px",
      padding: '0.75rem'
    };
  }

  paneTransparentStyle() {
    return {
      overflow: "hidden",
      "border-radius": "7px",
      padding: '0.75rem'
    };
  }

  pageStyle() {
    return {
      background: this.getTheme().getColor(2),
      color: this.getTheme().getColor(3),
    }
  }

  tabStyle() {
    return {
      height: `calc(100vh - 49px)`,
      overflow: `auto`,
      padding: `1rem`,
    }
  }
  
}

export default new ThemeManager